import React, { useState } from 'react'
import { Cell, Popup, PopupPosition } from 'react-vant'
import { EnvironmentOutline } from 'antd-mobile-icons'
import './index.css'
const Index: React.FC = () => {
    const [state, setState] = useState<PopupPosition>('')
    const onClose = () => setState('')

    function huan(event: any) {
        // 获取点击的元素
        var clickedElement = event.target;

        // 向上遍历DOM树，直到找到包含医院信息的div元素
        var hospitalInfoDiv = clickedElement.closest('.xuan');

        // 获取医院名称、等级和距离
        var hospitalName = hospitalInfoDiv.querySelector('h4').innerText;
        var hospitalLevel = hospitalInfoDiv.querySelector('.ww1').innerText;
        var hospitalDistance = hospitalInfoDiv.querySelector('.ww2').innerText;

        // 将信息存储到localStorage
        localStorage.setItem('hospitalInfo', JSON.stringify({
            name: hospitalName,
            level: hospitalLevel,
            distance: hospitalDistance
        }));

        setState('')

    }
    const yiyuan = JSON.parse(localStorage.getItem('hospitalInfo') || '{}');
    return (
        <div>
            <div className='oo'>
                <div className='oo-top'>
                    <img src="../src/assets/4_03.jpg" alt="" style={{ width: '30px', height: '30px' }} /><p className='t1'>{yiyuan.name}</p>
                    <button className='btn' onClick={() => setState('bottom')} >切换医院</button>

                    <Popup
                        visible={state === 'bottom'}
                        style={{ height: '85%' }}
                        position='bottom'
                        onClose={onClose}
                    >
                        <div className='oo7'>
                            <h3>请选择医院</h3><span className='span1' onClick={() => setState('')} >X</span>

                            <div className='xuan' onClick={huan}>
                                <h4>中健三新(北京)临床心理诊部</h4>
                                <div className='zi'>
                                    <p className='ww1'>未定级 专科医院</p><p className='ww2'>18.16km</p>
                                </div>
                            </div>

                            <div className='xuan' onClick={huan}>
                                <h4>北京天坛普华医院</h4>
                                <div className='zi'>
                                    <p className='ww1'>未定级 综合医院</p><p className='ww2'>35.70km</p>
                                </div>
                            </div>

                            <div className='xuan' onClick={huan}>
                                <h4>北京中医药大学东直门医院</h4>
                                <div className='zi'>
                                    <p className='ww1'>三甲 综合医院</p><p className='ww2'>36.59km</p>
                                </div>
                            </div>

                            <div className='xuan' onClick={huan}>
                                <h4>北京航天总医院</h4>
                                <div className='zi'>
                                    <p className='ww1'>二甲 综合医院</p><p className='ww2'>38.78km</p>
                                </div>
                            </div>

                            <div className='xuan' onClick={huan}>
                                <h4>北京诸园店</h4>
                                <div className='zi'>
                                    <p className='ww1'>未定级 专科医院</p><p className='ww2'>34.05km</p>
                                </div>
                            </div>
                        </div>
                    </Popup>
                </div>
                <div className='oo-bottom'>
                    <div className='kk-left'>
                        <p className='p1'>{yiyuan.level}</p>
                        <p className='p2'><EnvironmentOutline /> {yiyuan.distance}</p>
                    </div>
                    <div className='kk-right'>
                        <div className='kk1'>
                            <img src="../src/assets/4_07.jpg" alt="" style={{ width: '50px', height: '50px' }} />
                            <p className='pp1'>预约挂号</p>
                        </div>
                        <div className='kk1'>
                            <img src="../src/assets/4_09.jpg" alt="" style={{ width: '50px', height: '50px' }} />
                            <p className='pp1'>查报告</p>
                        </div>
                        <div className='kk1'>
                            <img src="../src/assets/4_11.jpg" alt="" style={{ width: '50px', height: '50px' }} />
                            <p className='pp1'>就诊卡</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Index
